import View from 'ol/View'
import './style.css'
import Map from 'ol/Map'
import TileLayer from 'ol/layer/Tile'
import { XYZ } from 'ol/source'
// ol是以面向对象的形式来设计api的
// map中的配置选项,target 表示地图实例挂载的容器 view 表示地图的视图 Layers 表示地图的底图(都有一个底图) source 图层数据源
const map = new Map({
  target: 'map',
  view: new View({
    center: [114.3165, 30.5264],// 中心点
    zoom: 10,
    projection: 'EPSG:4326',// 投影默认情况下 ol 使用的不是经纬度坐标系 使用的是墨卡托投影体系,这里设置转为经纬度投影体系
    // viewMode: '3D',
    // pitch: 45,
  }),
  layers: [new TileLayer({
    source: new XYZ({
      url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',// 高德的数据源
    }),
    // source: new OSM()// 内置的国外地图服务商，需要翻墙
  })]
})